import React, { memo, useState } from 'react'
import { CenterWapper } from './styles'
import IconSearch from '@/assets/svg/icon_search'
import VerticleDivider from '@/base-ui/divider/verticle-divider'
import SearchTabs from './c-cpns/search-tabs'
import SearchSection from './c-cpns/search-sections'

import headerData from '@/assets/data/search_titles'
import { CSSTransition } from 'react-transition-group'

const HeaderCenter = memo((props) => {
  const { isSearch, setSearchHandler } = props
  const [tabIndex, setTabIndex] = useState(0)
  const titles = headerData.map(item=>item.title)

  return (
    <CenterWapper>
      {/* 非搜索状态 */}
      <CSSTransition
        classNames="bar"
        timeout={200}
        unmountOnExit={true}
        in={!isSearch}
      >
        <div className="search-bar" onClick={e => setSearchHandler(true)}>
          <div className="search-input">
            <div className="text">任何地方</div>
            <VerticleDivider />
            <div className="text">任意一周</div>
            <VerticleDivider />
            <div className="text">添加人数</div>
          </div>
          <div className="icon">
            <IconSearch />
          </div>
        </div>
      </CSSTransition>
      {/* 搜索状态 */}
      <CSSTransition
        classNames="search"
        timeout={250}
        in={isSearch}
        unmountOnExit={true}
      >
        <div className="search-detail">
          <SearchTabs titles={titles} tabClick={setTabIndex} tabIndex={tabIndex} />
          <div className="info">
            <SearchSection searchInfos={headerData[tabIndex].searchInfos} /> 
          </div>
        </div>
      </CSSTransition>
    </CenterWapper>
  )
})

export default HeaderCenter